<template>
  <div class="support-knowledge">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>知识库</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="帮助文档" name="helpDocs">
            <div class="help-docs-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>帮助文档管理</span>
                    <div class="header-actions">
                      <el-input
                        v-model="helpSearch"
                        placeholder="搜索帮助文档"
                        style="width: 300px;"
                        clearable
                      >
                        <template #append>
                          <el-button @click="searchHelpDocs">
                            <el-icon><Search /></el-icon>
                          </el-button>
                        </template>
                      </el-input>
                      <el-button type="primary" @click="createHelpDoc">新建文档</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="category-card">
                      <template #header>
                        <div class="card-header">
                          <span>文档分类</span>
                        </div>
                      </template>
                      <el-tree
                        :data="helpCategories"
                        :props="{
                          children: 'children',
                          label: 'label'
                        }"
                        @node-click="handleCategoryClick"
                      />
                    </el-card>
                  </el-col>
                  
                  <el-col :span="18">
                    <el-table :data="helpDocs" style="width: 100%">
                      <el-table-column prop="title" label="文档标题" />
                      <el-table-column prop="category" label="分类" width="120" />
                      <el-table-column prop="author" label="作者" width="100" />
                      <el-table-column prop="updateTime" label="更新时间" width="180" />
                      <el-table-column prop="views" label="浏览量" width="80" />
                      <el-table-column label="操作" width="200">
                        <template #default="scope">
                          <el-button size="small" @click="viewHelpDoc(scope.row)">查看</el-button>
                          <el-button size="small" @click="editHelpDoc(scope.row)">编辑</el-button>
                          <el-button size="small" type="danger" @click="deleteHelpDoc(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    
                    <div class="pagination-container">
                      <el-pagination
                        v-model:current-page="helpCurrentPage"
                        v-model:page-size="helpPageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="helpTotal"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleHelpSizeChange"
                        @current-change="handleHelpCurrentChange"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="常见问题" name="faq">
            <div class="faq-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>常见问题管理</span>
                    <div class="header-actions">
                      <el-input
                        v-model="faqSearch"
                        placeholder="搜索常见问题"
                        style="width: 300px;"
                        clearable
                      >
                        <template #append>
                          <el-button @click="searchFaqs">
                            <el-icon><Search /></el-icon>
                          </el-button>
                        </template>
                      </el-input>
                      <el-button type="primary" @click="createFaq">新增问题</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="category-card">
                      <template #header>
                        <div class="card-header">
                          <span>问题分类</span>
                        </div>
                      </template>
                      <el-tree
                        :data="faqCategories"
                        :props="{
                          children: 'children',
                          label: 'label'
                        }"
                        @node-click="handleFaqCategoryClick"
                      />
                    </el-card>
                  </el-col>
                  
                  <el-col :span="18">
                    <el-table :data="faqs" style="width: 100%">
                      <el-table-column prop="question" label="问题" />
                      <el-table-column prop="category" label="分类" width="120" />
                      <el-table-column prop="author" label="作者" width="100" />
                      <el-table-column prop="updateTime" label="更新时间" width="180" />
                      <el-table-column prop="views" label="浏览量" width="80" />
                      <el-table-column label="操作" width="200">
                        <template #default="scope">
                          <el-button size="small" @click="viewFaq(scope.row)">查看</el-button>
                          <el-button size="small" @click="editFaq(scope.row)">编辑</el-button>
                          <el-button size="small" type="danger" @click="deleteFaq(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    
                    <div class="pagination-container">
                      <el-pagination
                        v-model:current-page="faqCurrentPage"
                        v-model:page-size="faqPageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="faqTotal"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleFaqSizeChange"
                        @current-change="handleFaqCurrentChange"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="操作指南" name="operationGuide">
            <div class="operation-guide-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>操作指南管理</span>
                    <div class="header-actions">
                      <el-input
                        v-model="guideSearch"
                        placeholder="搜索操作指南"
                        style="width: 300px;"
                        clearable
                      >
                        <template #append>
                          <el-button @click="searchGuides">
                            <el-icon><Search /></el-icon>
                          </el-button>
                        </template>
                      </el-input>
                      <el-button type="primary" @click="createGuide">新建指南</el-button>
                    </div>
                  </div>
                </template>
                
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card class="category-card">
                      <template #header>
                        <div class="card-header">
                          <span>指南分类</span>
                        </div>
                      </template>
                      <el-tree
                        :data="guideCategories"
                        :props="{
                          children: 'children',
                          label: 'label'
                        }"
                        @node-click="handleGuideCategoryClick"
                      />
                    </el-card>
                  </el-col>
                  
                  <el-col :span="18">
                    <el-table :data="guides" style="width: 100%">
                      <el-table-column prop="title" label="指南标题" />
                      <el-table-column prop="category" label="分类" width="120" />
                      <el-table-column prop="author" label="作者" width="100" />
                      <el-table-column prop="updateTime" label="更新时间" width="180" />
                      <el-table-column prop="views" label="浏览量" width="80" />
                      <el-table-column label="操作" width="200">
                        <template #default="scope">
                          <el-button size="small" @click="viewGuide(scope.row)">查看</el-button>
                          <el-button size="small" @click="editGuide(scope.row)">编辑</el-button>
                          <el-button size="small" type="danger" @click="deleteGuide(scope.row)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    
                    <div class="pagination-container">
                      <el-pagination
                        v-model:current-page="guideCurrentPage"
                        v-model:page-size="guidePageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="guideTotal"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleGuideSizeChange"
                        @current-change="handleGuideCurrentChange"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="版本更新" name="versionUpdate">
            <div class="version-update-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>版本更新记录</span>
                    <div class="header-actions">
                      <el-input
                        v-model="versionSearch"
                        placeholder="搜索版本更新"
                        style="width: 300px;"
                        clearable
                      >
                        <template #append>
                          <el-button @click="searchVersions">
                            <el-icon><Search /></el-icon>
                          </el-button>
                        </template>
                      </el-input>
                      <el-button type="primary" @click="createVersion">新增版本</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="versions" style="width: 100%">
                  <el-table-column prop="version" label="版本号" width="120" />
                  <el-table-column prop="title" label="更新标题" />
                  <el-table-column prop="type" label="更新类型" width="120">
                    <template #default="scope">
                      <el-tag :type="getVersionType(scope.row.type)">
                        {{ scope.row.type }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="publishTime" label="发布时间" width="180" />
                  <el-table-column prop="author" label="发布人" width="100" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="viewVersion(scope.row)">详情</el-button>
                      <el-button size="small" @click="editVersion(scope.row)">编辑</el-button>
                      <el-button size="small" type="danger" @click="deleteVersion(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="versionCurrentPage"
                    v-model:page-size="versionPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="versionTotal"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleVersionSizeChange"
                    @current-change="handleVersionCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 响应式数据
const activeTab = ref('helpDocs')
const helpSearch = ref('')
const faqSearch = ref('')
const guideSearch = ref('')
const versionSearch = ref('')

// 分页数据
const helpCurrentPage = ref(1)
const helpPageSize = ref(20)
const helpTotal = ref(150)
const faqCurrentPage = ref(1)
const faqPageSize = ref(20)
const faqTotal = ref(80)
const guideCurrentPage = ref(1)
const guidePageSize = ref(20)
const guideTotal = ref(45)
const versionCurrentPage = ref(1)
const versionPageSize = ref(20)
const versionTotal = ref(25)

// 帮助文档分类
const helpCategories = ref([
  {
    label: '用户管理',
    children: [
      { label: '用户注册' },
      { label: '用户登录' },
      { label: '权限设置' }
    ]
  },
  {
    label: '订单管理',
    children: [
      { label: '创建订单' },
      { label: '订单查询' },
      { label: '订单修改' }
    ]
  }
])

// 帮助文档数据
const helpDocs = ref([
  {
    id: 1,
    title: '如何注册新用户',
    category: '用户管理',
    author: 'admin',
    updateTime: '2023-06-15 14:30:22',
    views: 1247
  },
  {
    id: 2,
    title: '用户登录常见问题',
    category: '用户管理',
    author: 'support',
    updateTime: '2023-06-10 09:15:33',
    views: 892
  }
])

// FAQ分类
const faqCategories = ref([
  {
    label: '账户问题',
    children: [
      { label: '登录问题' },
      { label: '密码重置' },
      { label: '账户安全' }
    ]
  },
  {
    label: '订单问题',
    children: [
      { label: '订单创建' },
      { label: '订单修改' },
      { label: '订单取消' }
    ]
  }
])

// FAQ数据
const faqs = ref([
  {
    id: 1,
    question: '忘记密码怎么办？',
    category: '账户问题',
    author: 'support',
    updateTime: '2023-06-15 14:30:22',
    views: 1247
  },
  {
    id: 2,
    question: '如何修改订单信息？',
    category: '订单问题',
    author: 'support',
    updateTime: '2023-06-10 09:15:33',
    views: 892
  }
])

// 操作指南分类
const guideCategories = ref([
  {
    label: '基础操作',
    children: [
      { label: '系统登录' },
      { label: '界面介绍' },
      { label: '基本设置' }
    ]
  },
  {
    label: '高级功能',
    children: [
      { label: '数据导入' },
      { label: '报表生成' },
      { label: '权限管理' }
    ]
  }
])

// 操作指南数据
const guides = ref([
  {
    id: 1,
    title: '系统登录操作指南',
    category: '基础操作',
    author: 'admin',
    updateTime: '2023-06-15 14:30:22',
    views: 1247
  },
  {
    id: 2,
    title: '数据导入操作指南',
    category: '高级功能',
    author: 'admin',
    updateTime: '2023-06-10 09:15:33',
    views: 892
  }
])

// 版本更新数据
const versions = ref([
  {
    id: 1,
    version: 'v2.1.0',
    title: '新增数据导入功能',
    type: '功能更新',
    publishTime: '2023-06-15 14:30:22',
    author: 'developer'
  },
  {
    id: 2,
    version: 'v2.0.5',
    title: '修复订单查询bug',
    type: '问题修复',
    publishTime: '2023-06-10 09:15:33',
    author: 'developer'
  }
])

// 方法
const searchHelpDocs = () => {
  ElMessage.info(`搜索帮助文档: ${helpSearch.value}`)
}

const createHelpDoc = () => {
  ElMessage.info('创建新帮助文档')
}

const viewHelpDoc = (row: any) => {
  ElMessage.info(`查看帮助文档: ${row.title}`)
}

const editHelpDoc = (row: any) => {
  ElMessage.info(`编辑帮助文档: ${row.title}`)
}

const deleteHelpDoc = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除帮助文档 "${row.title}" 吗？`,
    '删除文档确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('帮助文档删除成功')
    // 从列表中移除
    const index = helpDocs.value.indexOf(row)
    if (index > -1) {
      helpDocs.value.splice(index, 1)
    }
  })
}

const handleCategoryClick = (node: any) => {
  ElMessage.info(`选择分类: ${node.label}`)
}

const handleHelpSizeChange = (val: number) => {
  helpPageSize.value = val
}

const handleHelpCurrentChange = (val: number) => {
  helpCurrentPage.value = val
}

const searchFaqs = () => {
  ElMessage.info(`搜索常见问题: ${faqSearch.value}`)
}

const createFaq = () => {
  ElMessage.info('新增常见问题')
}

const viewFaq = (row: any) => {
  ElMessage.info(`查看常见问题: ${row.question}`)
}

const editFaq = (row: any) => {
  ElMessage.info(`编辑常见问题: ${row.question}`)
}

const deleteFaq = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除常见问题 "${row.question}" 吗？`,
    '删除问题确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('常见问题删除成功')
    // 从列表中移除
    const index = faqs.value.indexOf(row)
    if (index > -1) {
      faqs.value.splice(index, 1)
    }
  })
}

const handleFaqCategoryClick = (node: any) => {
  ElMessage.info(`选择问题分类: ${node.label}`)
}

const handleFaqSizeChange = (val: number) => {
  faqPageSize.value = val
}

const handleFaqCurrentChange = (val: number) => {
  faqCurrentPage.value = val
}

const searchGuides = () => {
  ElMessage.info(`搜索操作指南: ${guideSearch.value}`)
}

const createGuide = () => {
  ElMessage.info('新建操作指南')
}

const viewGuide = (row: any) => {
  ElMessage.info(`查看操作指南: ${row.title}`)
}

const editGuide = (row: any) => {
  ElMessage.info(`编辑操作指南: ${row.title}`)
}

const deleteGuide = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除操作指南 "${row.title}" 吗？`,
    '删除指南确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('操作指南删除成功')
    // 从列表中移除
    const index = guides.value.indexOf(row)
    if (index > -1) {
      guides.value.splice(index, 1)
    }
  })
}

const handleGuideCategoryClick = (node: any) => {
  ElMessage.info(`选择指南分类: ${node.label}`)
}

const handleGuideSizeChange = (val: number) => {
  guidePageSize.value = val
}

const handleGuideCurrentChange = (val: number) => {
  guideCurrentPage.value = val
}

const searchVersions = () => {
  ElMessage.info(`搜索版本更新: ${versionSearch.value}`)
}

const createVersion = () => {
  ElMessage.info('新增版本更新')
}

const viewVersion = (row: any) => {
  ElMessage.info(`查看版本更新: ${row.version}`)
}

const editVersion = (row: any) => {
  ElMessage.info(`编辑版本更新: ${row.version}`)
}

const deleteVersion = (row: any) => {
  ElMessageBox.confirm(
    `确定要删除版本更新 "${row.version}" 吗？`,
    '删除版本确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('版本更新删除成功')
    // 从列表中移除
    const index = versions.value.indexOf(row)
    if (index > -1) {
      versions.value.splice(index, 1)
    }
  })
}

const handleVersionSizeChange = (val: number) => {
  versionPageSize.value = val
}

const handleVersionCurrentChange = (val: number) => {
  versionCurrentPage.value = val
}

// 工具方法
const getVersionType = (type: string) => {
  switch (type) {
    case '功能更新': return 'success'
    case '问题修复': return 'warning'
    case '性能优化': return 'primary'
    case '安全更新': return 'danger'
    default: return 'info'
  }
}
</script>

<style scoped>
.support-knowledge {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.category-card {
  height: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>